import React, { useEffect, useState } from 'react';
import { useSearchParams } from "react-router-dom"
import "./index.scss"
import { QuestionCircleOutlined } from "@ant-design/icons"
import service from '../../../../../api';
import * as echarts from 'echarts';

const Operateshuju = () => {
    //获取并存储参数
    var [params, setParams] = useSearchParams()
    var id = params.get('id')
    //top
    var [mydata, setData] = useState({
        "Paymentamount": 0,
        "Numberofpayers": 0,
        "PaymentOrder": 0,
        "visitors": 0,
        "cover": 0,
        "Touch": 0,
        "access": 0,
        "trigger": 0,
        "myechars": {
            "x": [],
            "visitor": [],
            "payment": []
        }
    })
    var txt = [
        { text: '7日内支付金额', num: mydata.Paymentamount },
        { text: '7日内支付人数', num: mydata.Numberofpayers },
        { text: '7日内支付订单数', num: mydata.PaymentOrder },
        { text: '7日内访客数', num: mydata.visitors },
        { text: '覆盖-触达转化率', num: mydata.cover },
        { text: '触达-访问转化率', num: mydata.Touch },
        { text: '访问-支付转化率', num: mydata.access },
        { text: '触发-支付转化率', num: mydata.trigger }
    ]
    useEffect(() => {
        operateshujulist()
        myecharts()
    }, [])
    useEffect(() => {
        myecharts()
    }, [mydata])
    var operateshujulist = async () => {
        var res = await service.operate.xlq_operatelist({ "id": id })
        if (res.status == 200) {
            setData(res.data[0].shuju)
        }
    }
    //eachrs
    var myecharts = () => {
        var myChart = echarts.init(document.getElementById('echars1') || document.body);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '交易趋势',
            },
            xAxis: {
                type: 'category',
                data: mydata.myechars.x
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                top: 25
            },
            grid: {
                x: 50,
                y: 50,
                x2: 20,
                y2: 30
            },
            series: [
                {
                    data: mydata.myechars.visitor,
                    smooth: true,  // 设置平滑系数
                    symbol: "none",
                    type: 'line'
                },
                {
                    data: mydata.myechars.payment,
                    smooth: true,  // 设置平滑系数
                    symbol: "none",
                    type: 'line'
                }
            ]
        });
        return myChart;
    }
    return (
        <div className='operateshuju'>
            <div className="top">
                <p>计划数据汇总</p>
                <div className="fei">
                    {
                        txt.map((item: any, index: any) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="te">
                                        <span>{item.text}</span>
                                        &nbsp;&nbsp;
                                        <QuestionCircleOutlined />
                                    </div>
                                    <p>{item.num}</p>
                                </div>
                            )
                        })
                    }
                </div>


            </div>
            <div className="echars">
                <div id="echars1"></div>
            </div>
        </div>
    );
};

export default Operateshuju;